<template>

		<view class="index app-container">
			<view class="index-header">
				<u-swiper height="400" :list="list"></u-swiper>
			</view>
			<view class="index-content">
				<view class="content-items" @click="experimentClick(item.id)" v-for="item in dataList" :key="item.id">
					<view class="items-left">
						<image class="img" :src="item.mainImg" mode=""></image>
					</view>
					<view class="items-right">
						<view class="right-title">
							{{item.name}}
						</view>
						<view class="right-content">
							<!-- <view class="content-item">
							<text class="content-item-title">快乐菜园</text>
							<view class="">
								<u-icon color="#FE615F" class="content-item-icon" name="map-fill"></u-icon>
								<text>N125. W125.2</text>
							</view>
						</view> -->
							<view class="content-item">
								<text class="content-item-title">开始时间</text>
								<view class="">
									<!-- <u-icon color="#FE615F" class="content-item-icon" name="hourglass"></u-icon> -->
									<text>{{item.startedOn}}</text>
								</view>
							</view>
							<view class="content-item">
								<text class="content-item-title">结束时间</text>
								<view class="">
									<text>{{item.endedOn || '还未结束'}}</text>
								</view>
							</view>
							<view class="content-item">
								<text class="content-item-title">教师</text>
								<view class="">
									<text>{{item.teacherName || ''}}</text>
								</view>
							</view>
							<!-- <view class="content-item">
								<text class="content-item-title">实验目的</text>
								<view class="content-item-introduction">
									{{item.introduction}}
								</view>
							</view> -->

						</view>
					</view>
				</view>
			</view>
			<view v-if="!isLogin" class="index-bottom">
				<text>登录进入快乐耕种时间</text>
				<view class="">
					<u-button v-if="showLogin" @click="getUserInfo" class="bottom-btn" size="medium" shape="circle"
						type="success">登录</u-button>
					<u-button v-else @getphonenumber="getPhoneNumber" open-type="getPhoneNumber" class="bottom-btn"
						size="medium" shape="circle" type="success">授权</u-button>
				</view>
			</view>
		</view>
	</template>

	<script>
		import * as that from '../../API/index.js'
		export default {
			data() {
				return {
					title: 'Hello',
					list: [{
						image: 'https://www.17gz8.com/uploads/images/carousel_image1.png'
					}, {
						image: 'https://www.17gz8.com/uploads/images/carousel_image2.png'
					}, {
						image: 'https://www.17gz8.com/uploads/images/carousel_image3.png'
					}],
					showLogin: true,
					dataList: [],
					haveBind:true
				}
			},
			onLoad() {
				uni.login({
					provider: 'weixin',
					success: res => {
						console.log(res)
						wx.setStorageSync('jsCode', res.code);
						console.log(res);
						console.log('isLogin---------------执行');
						this.login()
					},
					fail: (res) => {
						console.log(res);
					}
				});
				// this.getExperiments()
			},
			computed: {
				isLogin() {
					return this.$store.getters.getLogin
				}
			},
			methods: {
				getPhoneNumber(e) {
					console.log(e)
					var data = {
						openid: wx.getStorageSync('openid'),
						unionid: wx.getStorageSync('unionid'),
						sessionKey: wx.getStorageSync('session_key'),
						user_iv: wx.getStorageSync('userIv'),
						user_encryptedData: wx.getStorageSync('userEncryptedData'),
						phone_iv: e.detail.iv,
						phone_encryptedData: e.detail.encryptedData
					};
					that.phoneBind(data).then(res => {
						console.log(res)
						uni.setStorageSync("userInfo", res.data)
						uni.setStorageSync("token", res.token)
						uni.setStorageSync("phone", res.data.account)
						this.getExperiments()
						this.$store.commit('SET_ISLOGIN', true)
						// this.login()
					})
				},
				login() {
					that.login({
						code: uni.getStorageSync("jsCode")
					}).then(res => {
						console.log(res)
						uni.setStorageSync('openid', res.openid);
						uni.setStorageSync('unionid', res.unionid);
						uni.setStorageSync('session_key', res.sessionKey);
						uni.setStorageSync("userInfo", res.data)
						uni.setStorageSync("phone", res.data.account)
						uni.setStorageSync("token", res.token)
						this.getExperiments()
						this.$store.commit('SET_ISLOGIN', true)
					}).catch(err => {

						console.log('err  ----',err)


						if (err.code === 420) {
							this.showLogin = true
							uni.setStorageSync('openid', err.openid);
							uni.setStorageSync('unionid', err.unionid);
							uni.setStorageSync('session_key', err.sessionKey);
							// console.log(this.showLogin)
							// this.haveBind = false
							// this.login()
						}
					})
				},
				getUserInfo() {
					uni.getUserProfile({
						lang: 'en',
						desc: '登录',
						success: res => {
							console.log(res);
							uni.setStorageSync('userIv', res.iv);
							uni.setStorageSync('userEncryptedData', res.encryptedData);
							uni.setStorageSync('userInfo', res.userInfo);
							// if(!this.haveBind){
							this.showLogin = false
							// }else{ 
								// this.login() 
							// }
						}
					})
				},
				getExperiments() {
					that.experimentsList().then(res => {
						console.log(res)
						this.dataList = res.data
						// this.dataList = [...res.data,...res.data,...res.data]
					})
				},
				experimentClick(id) {
					uni.navigateTo({
						url: '../experiment-detail/experiment-detail?id=' + id
					})
				}
			}
		}
	</script>

	<style lang="scss">
		page {
			height: 100%;
		}

		.index {
			display: flex;
			flex-direction: column;

			.index-content {
				flex: 1;
				height: 0;
				overflow: auto;

				.content-items {
					@include flex(space-between);
					padding: 20rpx 0;

					.items-left {
						flex: none;
						width: 200rpx;
						height: 160rpx;
						margin-right: 20rpx;

						.img {
							width: 200rpx; 
							height: 160rpx;
						}
					}

					.items-right {
						flex: 1;

						.right-title {
							font-size: 32rpx;
							font-weight: bold;
							margin-bottom: 10rpx;
						}

						.right-content {
							.content-item {
								margin-bottom: 10rpx;
								display: flex;
								justify-content: flex-start;

								.content-item-title {
									font-weight: bold;
									margin-right: 18rpx;
									width: 120rpx;
									display: block;
									flex: none;
								}

								.content-item-icon {
									margin-right: 5rpx;
								}

								.content-item-introduction {
									// width: 110rpx;
									overflow: hidden;
									text-overflow: ellipsis;
									text-overflow: -o-ellipsis-lastline;
									display: -webkit-box;
									-webkit-line-clamp: 3;
									/* 块元素显示的文本的行数 */
									line-clamp: 3;
									/* 此属性不生效 */
									-webkit-box-orient: vertical;
									/* 设置或检索伸缩盒对象的子元素的排列方式 ,盒子行数根据高度来计算 */
									overflow-wrap: break-word;
									/* 设置div换行 */
								}
							}
						}
					}
				}
			}

			.index-bottom {
				position: absolute;
				bottom: 20rpx;
				@include flex(space-between);
				width: 80%;
				left: 50%;
				transform: translateX(-50%);
				border-radius: 50rpx;
				padding: 16rpx 40rpx;
				padding-right: 0;
				color: #FFFFFF;
				background-color: #676768;

				.bottom-btn {
					letter-spacing: 2px;
					margin-right: 40rpx;
				}
			}
		}
	</style>
